const api = require("../../request/api");

// pages/region/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    multiArray: [],  // 三维数组数据
    multiIndex: [0, 0, 0], // 默认的下标
    step: 0, // 默认显示请选择
    pCode: '',
  },
  getProvince(){
    wx.showLoading({ title: '加载中', })
    var that = this;
    wx.request({
      url: api.get_area_list,
      method: 'POST',
      header: { 'content-type': 'application/json' },
      data:{"parent_id": 0},
      success(res) {
        wx.hideLoading()
        var data = res.data.data
        var provinceList = data//  放在一个数组里面，在数组前边添加一个清空选项
        var provinceArr = data.map((item) => { return item.area_name }) // 获取数据里面的value值，就是只用数据的名称用于页面展示 
        provinceArr.unshift("全部省份") // 在页面展示用的也需要添加一个清空项
        that.setData({
          multiArray: [provinceArr, ["全部市"], ["全部区"]],
          provinceList,   // 省级原始数据
          provinceArr,    // 省级所有的名称用于页面展示
          pCode: provinceList[0].area_id // 用于查询收费站点的查询code，添加清空项后不需要该操作，都可
        })
        console.log(provinceList)
        var defaultId = that.data.provinceList[0].area_id  // 使用第一项当作参数获取市级数据，添加清空项后不需要该操作，都可
        if (defaultId) {
          that.setData({
            currnetCityQueryId: defaultId  // 保存市的查询id，用于后边的查询市操作
          })
          that.getCity(defaultId)  // 获取市级数据
        }
      }
    })
  },
  getCity(id) { // 获取市级数据
    console.log(id)
    this.setData({
      currnetCityQueryId: id  // 保存当前选择的市级id
    })
    var that = this;
    wx.request({
      url: api.get_area_list, // 仅为示例，并非真实的接口地址
      header: { 'content-type': 'application/json' },
      method: 'POST',
      data:{"pid": id},
      success(res) {
        var data = res.data.data
        var cityList = data
        var cityArr = data.map((item) => { return item.area_name })
        
        that.setData({
          multiArray: [that.data.provinceArr, cityArr, ["全部区"]],  // 更新三维数组 更新后长这样 [['全部省', '北京省',......],["全部市","北京市"],["全部区"]]
          cityList,  // 保存下市级原始数据
          cityArr,  // 市级所有的名称
          cityCode: cityList[0].area_id // 用于查询收费站点的查询code，添加清空项后不需要该操作，都可
        })
        var defaultId = that.data.cityList[0].area_id  // 用第一个获取门店数据，添加清空项后不需要该操作，都可
        if (defaultId) {
          that.setData({
            currnetAreaQueryId: defaultId // 保存区的查询id，用于后边的查询区操作
          })
          that.getArea(defaultId) // 获取区数据
        }
      }
    })
  },
  getArea(id) {
    this.setData({
      currnetAreaQueryId: id // 更新当前选择的市级id
    })
    var that = this;
    wx.request({
      url: api.get_area_list, // 仅为示例，并非真实的接口地址
      header: { 'content-type': 'application/json' },
      method: 'POST',
      data:{"pid": id},
      success(res) {
        var data = res.data.data
        var areaList = data
       
        var areaArr = data.map((item) => { return item.area_name })
        areaArr.unshift("全部区")
        that.setData({
          multiArray: [that.data.provinceArr, that.data.cityArr, areaArr],  // 重新赋值三级数组 此时的数组大概是这样 [['全部省', '北京省',......],["全部市","北京市"],["全部区","朝阳区","海淀区"......]]
          areaList,  // 保存区原始数据
          areaArr,    // 保存区名称
          adCode: areaList[0].Code // 用于查询收费站点的查询code
        })
      }
    })
  },
  columnchange(e) {  // 滚动选择器 触发的事件
    console.log(e)
    var column = e.detail.column  // 当前改变的列
    var data = {
      multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)),
      multiArray: JSON.parse(JSON.stringify(this.data.multiArray))
    }
    data.multiIndex[column] = e.detail.value;  // 第几列改变了就是对应multiIndex的第几个，更新它
    switch (column) { // 处理不同的逻辑
      case 0:   // 第一列更改 就是省级的更改
        var currnetCityQueryId = this.data.provinceList[e.detail.value].area_id
        if (e.detail.value !== 0) {  // 判断当前的value值是不是真正的更新了
          if (this.data.provinceList[e.detail.value].area_id){ // 当前的市的查询id
            this.getCity(currnetCityQueryId)  // 获取当前市的查询id下面的市级数据
          }
          this.setData({
            pCode: this.data.provinceList[e.detail.value].area_id, // 获取当前选择项的站点查询code
            cityCode: "",
            adCode: ""
          })
        } else {
          this.getProvince() // 重新调用获取省数据，以清空市和区的列表
          this.setData({
            multiArray: [this.data.provinceArr, [], []],
            pCode: this.data.provinceList[e.detail.value].Code, // 获取当前选择项的站点查询code
            cityCode: "",
            adCode: ""
          })
        }
        data.multiIndex[1] = 0  // 将市默认选择第一个
        break;

      case 1:  // 市发生变化
        var currnetAreaQueryId = this.data.cityList[e.detail.value].Id
        if (e.detail.value !== 0) {  // 同样判断
          if (this.data.cityList[e.detail.value].Id){
            this.getArea(currnetAreaQueryId)   // 获取区
          }
          this.setData({
            cityCode: this.data.cityList[e.detail.value].Code, // 获取当前选择项的站点查询code
            adCode: ""
          })
        } else {
          this.getCity(this.data.currnetCityQueryId) // 使用当前省列表中获取到的市列表查询id重新调用，以更新（置空）区的列表
          this.setData({
            multiArray: [this.data.provinceArr, [], []],
            cityCode: this.data.cityList[e.detail.value].Code, // 获取当前选择项的站点查询code
            adCode: ""
          })
        }
        data.multiIndex[2] = 0  // 门店默认为第一个
        break;
      case 2:
        this.setData({
          adCode: this.data.areaList[e.detail.value].Code // 获取当前选择项的站点查询code
        })

    }
    this.setData(data)  // 更新数据
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getProvince()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})